<template>



	<view class="page" >
    <u-loading-page :loading="pageloading"  icon-size="30" fontSize="14" loadingColor="#AE87D8" color="#AE87D8" loading-text="加载中..." bg-color="#fff"></u-loading-page>
				   <!-- content-->
		<!-- 搜索 -->
		<view class="article-search" >
			<view class="icon">
				<!-- <image  :src="/static/nav/logo-1.png"></image> -->
				<text style="font-size:42rpx;font-weight: bold;color:#fff;">伊姿漾</text>
				<!-- <image class="logo-ico" :src="comm_img_url+'/pro/logo-1.png'" mode=""></image> -->
			</view>
			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" :value="findValue" confirm-type="search" @confirm="findSearch"  placeholder="输入搜索内容" />
			</view>
		</view>
		<mescroll-body ref="mescrollRef"
		           @down="downCallback"
		           @up="upCallback"
		           :down="downOption"
		           :up="upOption"
		           :top="0">
		<!-- banner -->
		<view class="banner">
			<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" @tap="jumpType(item,key1)" :key="index">
					<image mode="aspectFill" :src="item.imgurl"></image>
					<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
				</swiper-item>
			</swiper>
		</view>
		<!-- 文章数据 -->
		
		<view class="head flex-box">
			<view class="left box-1 flex-box">
				<text class="hd"></text>精选动态
			</view>
			<view class="right">
				
				<text v-for="(item,index) in btList" :key="index" class=" rt-ico" @click="itemList(item)" :class="item.cond?'active':''" >{{item.name}}</text>
				<!-- <text @click="activity_list('visits')" class="rt-ico">最新</text> -->
			</view>
		</view>
	   <default-expansion @trigger='trigger' :particularsList='particularsList'></default-expansion>
    </mescroll-body>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import defaultExpansion from "@/components/expansion-theme/default.vue"
	import TabBar from '../../components/TabBar/TabBar.vue';
  // 引入mescroll-mixins.js
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
    mixins: [MescrollMixin], // 使用mixin
		components:{
			TabBar,
			defaultExpansion
		},
		data() {
			return {
        pageloading:true,
				comm_img_url:'',
				findValue:'',
				defaultV1:'id',
				scrollLeft: 0,
				scrollTop: 0,
				btList: [{name:'全部',cond:true},{name:'最热',cond:false},{name:'最新',cond:false}],
				swiperList: [
					{
						id: 0,
						type: 'image',
						url: '/static/img/banner_00.png'
					},
					
				],
				pageSize:200,
				page:1,
				particularsList: [
					
				],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
				},
					};
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad() {
			this.comm_img_url = this.$c.appImg
			this.getAds()
		},
		methods:{
			// 搜索
			findSearch(e){
				console.log(e.detail,'search')
				this.findValue = e.detail.value
				uni.pageScrollTo({
					scrollTop:280,
					duration:500
				})
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			jumpType(item,key) {
				console.log('swperClick')
				var path = item.link;
				if (item.link_type == 1) {
					uni.navigateTo({
						url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
					})
				} else if (item.link_type == 2) {
					uni.switchTab({
						url: path
					})
				} else if (item.link_type == 3) {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 广告
			getAds(){
				this.$u.api.souceAds({type:3}).then(res => {
						if (res.status) {
							this.swiperList = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			itemList(item){
				for(let i=0;i<this.btList.length;i++){
					this.btList[i].cond = false
				}
				item.cond = true
				if(item.name=='全部'){
					this.tid = 0
					this.mescroll.resetUpScroll() // 重新触发upCallback
					this.defaultV1 = 'id'
				}
				else if(item.name=='最热'){
					this.mescroll.resetUpScroll() // 重新触发upCallback
					this.defaultV1 = 'id'
				}else{
					this.mescroll.resetUpScroll() // 重新触发upCallback
					this.defaultV1 = 'visits'
				}
			},
			trigger(index) {
				var that = this
				that.$set(that.particularsList[index], 'showText', !that.particularsList[index].showText)
				if (that.particularsList[index].showText) {
					that.particularsList[index].scrollTop = this.scrollTop - 30
				} else {
					uni.pageScrollTo({
						scrollTop: that.particularsList[index].scrollTop,
						duration: 250,
					})
				}
			},
		  /*下拉刷新的回调, 有三种处理方式:*/
		  downCallback(){
			this.mescroll.endSuccess();
		  },
		  /*上拉加载的回调*/
		    upCallback(page) {
		      //联网加载数据
			  console.log(page,'page')
			  let that = this
		      this.$u.api.activityList({page:page.num,so:this.findValue}).then(res=>{
            this.pageloading = false;
		  		  console.log(res,'商品列表')
				let result = res.msg.list
				// that.particularsList = result
				for(let i=0;i<result.length;i++){
					result[i].id = result[i].id
					result[i].created_at = result[i].create_time
					result[i].content = result[i].detail
					result[i].img_list = result[i].imgs
					result[i].user_name = result[i].userName
					result[i].headimgurl = result[i].userLogo
					result[i].need_pd = result[i].isFabulous
					result[i].showText=  result[i].status==0?false:true
					
				}
				this.mescroll.endByPage(10, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
				//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
				//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
							    
				//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
							      
				//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
				// this.mescroll.endSuccess(res.list.length);
				if(page.num == 1){this.particularsList = []} //如果是第一页需手动制空列表
				this.particularsList=this.particularsList.concat(res.msg.list); //追加新数据

		  		return false
		   
		      }).catch(()=>{
		      	//联网失败, 结束加载
            this.pageloading = false;
		      	this.mescroll.endErr();

		      })
		    },
			/**
			 * 文章点击
			 */
			onArticle(){
				uni.navigateTo({
					url: '/pages/ArticleDetails/ArticleDetails',
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'discover.scss';
</style>
